<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>layfilter 叠加过滤搜索组件 layfilter - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="实现如淘宝页面的过滤搜索功能，可以单选，可以复选等"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>layfilter 叠加过滤搜索组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">layfilter</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/9055032/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">凡繁**烦</cite> <img src="/avatar/9055032.gif" alt="凡繁**烦"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>实现如淘宝页面的过滤搜索功能，可以单选，可以复选等</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2020-4-6 </span> <span class="layui-inline">创建：2019-2-26 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="https://layui.52fansite.com/" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <div class="layui-elem-quote">
         1.引入 laymock 和 layfilter 组件
       </div>
       <pre>layui.config({<br>    base: '../layui_exts/' //配置 layui 第三方扩展组件存放的基础目录<br>  }).extend({<br>    laymock:'laymock/laymock', //mock数据<br>    layfilter:'layfilter/layfilter'<br>  });</pre>
       <div class="layui-elem-quote">
         2.使用组件
       </div>
       <pre>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>  &lt;meta charset="utf-8"&gt;<br>  &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;<br>  &lt;title&gt;layui扩展组件layfilter和laymock&lt;/title&gt;<br>  &lt;link rel="stylesheet" href="/layui/css/layui.css" media="all"&gt;<br>  &lt;style&gt;<br>    body{margin: 10px;}<br>    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}<br>  &lt;/style&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&lt;div id="layfilter" lay-filter="layfilter"&gt;&lt;/div&gt;<br>&lt;div style="margin-top: 10px;"&gt;<br>  &lt;button class="layui-btn layui-btn-primary" id="getvalBtn"&gt;获取选中值&lt;/button&gt;<br>  &lt;button class="layui-btn layui-btn-primary" id="getDataBtn"&gt;查看数据接口出参&lt;/button&gt;<br>&lt;/div&gt;<br><br>&lt;table class="layui-hide" id="demo" lay-filter="test"&gt;&lt;/table&gt;<br> <br>&lt;script type="text/html" id="barDemo"&gt;<br>  &lt;a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"&gt;查看&lt;/a&gt;<br>  &lt;a class="layui-btn layui-btn-xs" lay-event="edit"&gt;编辑&lt;/a&gt;<br>  &lt;a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"&gt;删除&lt;/a&gt;<br>&lt;/script&gt;<br>  <br>&lt;script src="layui/layui.js"&gt;&lt;/script&gt;<br>&lt;script src="js/common.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>layui.config({<br>  version: '1545041465443' //为了更新 js 缓存，可忽略<br>});<br> <br>layui.use([ 'layer', 'table','laymock','layfilter'], function(){<br>  var $ = layui.jquery;<br>  var layer = layui.layer //弹层<br>  ,table = layui.table //表格<br>  ,laymock = layui.laymock<br>  ,layfilter = layui.layfilter;<br><br>    laymock.mockData(RegExp('http://127.0.0.1:5500/user/list.*'),'get',function(option){<br>        var limit = getUrlParam(option.url,'limit');<br>        var data = {'code':0,'msg':'','count':100,'data|{count}':[<br>                {"userName" : '@<a href="javascript:;" class="fly-aite">cname',</a>     //模拟名称<br>                "id":"@<a href="javascript:;" class="fly-aite">id",</a><br>                "age|1-100":10,          //模拟年龄(1-100)<br>                "color"    : "@<a href="javascript:;" class="fly-aite">color",</a>    //模拟色值<br>                "date"     : "@<a href="javascript:;" class="fly-aite">date('yyyy-MM-dd')",</a>  //模拟时间<br>                "url"      : "@<a href="javascript:;" class="fly-aite">url()",</a>     //模拟url<br>                "sign"  : "@<a href="javascript:;" class="fly-aite">cparagraph()",</a> //模拟文本<br>                "score|-20-100":100,<br>                "sex|1-2":2,<br>                "avatar":"@<a href="javascript:;" class="fly-aite">image"</a><br>                }]<br>            }<br>        data = JSON.parse(JSON.stringify(data).replace('{count}',limit));<br>        return laymock.mock.mock(data);<br>        }<br>            <br>    );<br>  <br>  //向世界问个好<br>  layer.msg('Hello World');<br><br>  var dataSource = <br><br>  layfilter.render({<br>      elem:'#layfilter',<br>      itemWidth:[100],<br>      height:200,<br>      url:'/json/filter.json',<br>      dataSource:dataSource,<br>  });<br><br>  $('#getvalBtn').click(function(){<br>    layfilter.getValue(function(data){<br>      layer.alert(JSON.stringify(data));<br>    })<br>  });<br>  $("#getDataBtn").click(function(){<br>    $.getJSON('/json/filter.json',function(res){<br>      layer.alert(JSON.stringify(res));<br>    })<br>  })<br>  layfilter.on('click(layfilter)',function(obj){<br>        console.log(obj);<br>  })<br>  <br>  //执行一个 table 实例<br>  table.render({<br>    elem: '#demo'<br>    ,height: 420<br>    ,url: 'http://127.0.0.1:5500/user/list' //数据接口<br>    ,title: '用户表'<br>    ,page: true //开启分页<br>    ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档<br>    ,totalRow: true //开启合计行<br>    ,cols: [[ //表头<br>      {type: 'checkbox', fixed: 'left'}<br>      ,{field: 'id', title: 'ID'}<br>      ,{field: 'id', title: 'avatar',templet:function(d){<br>          return '&lt;image src='+d.avatar+'/&gt;'<br>      }}<br>      ,{field: 'userName', title: '用户名'}<br>      ,{field: 'age', title: '年龄', sort: true, totalRow: true}<br>      ,{field: 'sex', title: '性别', templet:function(d){<br>          return d.sex==1?'男':'女'<br>      }}<br>      ,{field: 'score', title: '评分', sort: true, totalRow: true}<br>      ,{field: 'sign', title: '签名',templet:function(d){<br>          return '&lt;span style="color:'+d.color+'"&gt;'+d.sign+'&lt;/span&gt;'<br>      }}<br>      ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}<br>    ]]<br>  });<br>  <br>  //监听头工具栏事件<br>  table.on('toolbar(test)', function(obj){<br>    var checkStatus = table.checkStatus(obj.config.id)<br>    ,data = checkStatus.data; //获取选中的数据<br>    switch(obj.event){<br>      case 'add':<br>        layer.msg('添加');<br>      break;<br>      case 'update':<br>        if(data.length === 0){<br>          layer.msg('请选择一行');<br>        } else if(data.length &gt; 1){<br>          layer.msg('只能同时编辑一个');<br>        } else {<br>          layer.alert('编辑 [id]：'+ checkStatus.data[0].id);<br>        }<br>      break;<br>      case 'delete':<br>        if(data.length === 0){<br>          layer.msg('请选择一行');<br>        } else {<br>          layer.msg('删除');<br>        }<br>      break;<br>    };<br>  });<br>  <br>  //监听行工具事件<br>  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"<br>    var data = obj.data //获得当前行数据<br>    ,layEvent = obj.event; //获得 lay-event 对应的值<br>    if(layEvent === 'detail'){<br>      layer.msg('查看操作');<br>    } else if(layEvent === 'del'){<br>      layer.confirm('真的删除行么', function(index){<br>        obj.del(); //删除对应行（tr）的DOM结构<br>        layer.close(index);<br>        //向服务端发送删除指令<br>      });<br>    } else if(layEvent === 'edit'){<br>      layer.msg('编辑操作');<br>    }<br>  });<br>  <br>});<br>&lt;/script&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;        </pre>说明：mock看官网说明：http://mockjs.com/
       <br>具体内容请下载之后运行查看
       <br>
       <img src="/upload/2019_2/9055032_1551231282047_53581.jpg"> 
       <br>更新日志
       <br>2019/2/27 解决多选取消后取值依然存在的bug 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/9055032_1551231399420_24180.rar" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://gitee.com/lyfweb/layfilter.git" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> <a href="https://github.com/java-lyf/layfilter.git" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-black"> 去 GitHub 下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>